<template>
  <div class="centent">
    <div style="background-color: #FFFFFF;">
      <div class="ipt_box">
        <el-input v-model="input1" placeholder="请输入名称" clearable style="width: 20%;margin-left: -0.9%;" />
        <el-input v-model="input2" placeholder="请输入key" clearable style="width: 20%;margin-left: 2%;" />
        <el-button style="margin-left: 2%;" type="primary" icon="el-icon-search" @click="srarch">搜索</el-button>
      </div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="text" disabled @click="open">XML</el-button>
            <el-button type="text" disabled @click="openPic(scope.row)">流程图</el-button>
            <el-button v-if="scope.row.suspensionState==1?true:false" type="text" @click="Suspend(scope.row,scope.$index)">挂起</el-button>
            <el-button v-else type="text" @click="Suspend(scope.row,scope.$index)">激活</el-button>
            <el-button type="text" @click="deleteItem(scope.row,scope.$index)">删除</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="操作" width="180" />
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="modelKey" label="Key" width="180" />
        <el-table-column prop="describe" label="版本" width="180" />
        <el-table-column prop="tenantId" label="系统" />
      </el-table>
      <div style="margin-top: 10px;display: flex;justify-content: center;">
        <el-pagination
          :current-page="currentPage"
          :page-size="10"
          layout="total,  prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      //  列表数据源
      tableData: [

      ],
      // 当前分页位置
      currentPage: 1,
      // 搜索框
      input1: '',
      input2: ''
    }
  },
  mounted() {
    this.definition()
  },
  methods: {
    //  search
    srarch() {
      this.$Http.search({ name: this.input1, pageSize: 10, modelKey: this.input2 }).then(res => {
        if (res.result.total === 0) {
          this.$message({
            type: 'warning',
            message: '数据0条'
          })
        } else {
          this.tableData = []
          this.total = res.result.total
          res.result.data.forEach(item => {
            console.log(item)
            this.tableData.push(item)
          })
        }
      })
    },
    //   load列表
    definition() {
      this.tableData = []
      this.$Http
        .definition({ pageNum: 1, pageSize: 10 })
        .then((res) => {
          res.result.data.forEach(item => {
            this.tableData.push(item)
          })
          this.total = res.result.total
        })
        .catch((error) => {
          console.log('err', error)
        })
    },
    //  打开图片
    openPic(data) {
      window.open(`http://192.168.2.200:8888/rest/definition/processFile/img/${data.id}`, '_blank')
    },
    // 挂起&激活
    Suspend(data, index) {
      console.log(data.id, data.suspensionState)

      this.$Http.Suspend({ suspensionState: data.suspensionState, id: data.id }).then(res => {
        this.definition()
        this.$message({
          type: 'success',
          message: res.message
        })
      })
    },
    // 激活
    activate() {},
    // 删除
    deleteItem(data, index) {
      const id = data.deploymentId
      this.$confirm('删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$ask.deleteItem({ deploymentId: id })
          .then(res => {
            this.definition()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    open() {
      this.$alert('这是一段内容', '标题', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          })
        }
      })
    },
    // 跳转在线编辑页面
    to_index() {
      this.$router.push('/index')
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    }

  }
}
</script>
<style lang="scss" scoped>
  .centent {
    padding: 25px;

    .ipt_box {
      width: 100%;
      padding: 15px;
      display: flex;
      span{
        text-align: center;
        padding-top: 0.6%;
        margin-left: 2%;
      }
    }
  }
  .el-button--text{
    padding: 0;
  }
</style>
